class GlassZoom {
    /**
     * 初始化属性节点
     * @param {*} id
     */
    constructor(id) {
            this.root = document.querySelector(id)
            this.mask = this.root.querySelector('.mask') //遮罩层mask
            this.showBox = this.root.querySelector('.show-box') //显示图片showBox
            this.bigGlass = this.root.querySelector('.right') //放大镜bigGlass
            this.bigPicBox = this.root.querySelector('.right>img') //背景图bigpicBox
            this.lisEle = this.root.querySelectorAll('ul>li') //获取所有tab切换小图
            this.showImg = this.root.querySelector('.show-box>img') //显示图片
        }
        /**
         *
         * 计算背景图比例
         *   遮罩层mask            放大镜bigGlass
         *  ---------------   =   ------------------
         *   显示图片showbox        背景图bigPicBox
         *
         *   背景图片bigpicbox = 放大镜bigGlass*显示图片showbox/遮罩层mask
         */
    setScale() {
        this.bigPicBox.style.width =
            (this.bigGlass.offsetWidth * this.showBox.offsetWidth) /
            this.mask.offsetWidth +
            'px'
        this.bigPicBox.style.height =
            (this.bigGlass.offsetHeight * this.showBox.offsetHeight) /
            this.mask.offsetHeight +
            'px'
    }

    /**
     * 放大镜功能
     */
    moveGlass() {
        //移入显示遮罩层
        this.showBox.onmouseover = () => {
                this.mask.style.display = 'block'
                this.setScale()
            }
            //移出隐藏遮罩层
        this.showBox.onmouseout = () => {
                this.mask.style.display = 'none'
            }
            //移动遮罩层
        this.showBox.onmousemove = (e) => {
            e = e || window.event //事件对象

            let x = e.offsetX - this.mask.offsetWidth / 2
            let y = e.offsetY - this.mask.offsetHeight / 2

            if (x < 0) x = 0
            if (x > this.showBox.offsetWidth - this.mask.offsetWidth)
                x = this.showBox.offsetWidth - this.mask.offsetWidth
            if (y < 0) y = 0
            if (y > this.showBox.offsetHeight - this.mask.offsetHeight)
                y = this.showBox.offsetHeight - this.mask.offsetHeight

            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            /**
               遮罩层移动距离        遮罩层
               ------------   =  ------------
               背景图片移动距离      放大镜

                背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
             **/
            let moveX = (x * this.bigGlass.offsetWidth) / this.mask.offsetWidth
            let moveY = (y * this.bigGlass.offsetHeight) / this.mask.offsetHeight

            this.bigPicBox.style.left = -moveX + 'px'
            this.bigPicBox.style.top = -moveY + 'px'
        }
    }

    /**
     * 切换放大镜图片
     *  功能:  选中小图，显示图片和背景图片切换为小图对应图片
     *        1. 给小图片绑定事件
     *            1.1 循环遍历每个小图，设置事件
     *            1.2 事件委托，给它父元素设置事件
     *        2. 选中小图设置选中样式active
     *            设置之前先清掉所有小图选中样式active
     */
    onTabGlass() {
        let _this = this
        for (let i = 0; i < this.lisEle.length; i++) {
            this.lisEle[i].onmouseover = function(e) {
                //清掉所有小图选中样式
                _this.onClear()
                console.log(e.target)
                this.classList.add('active')
                _this.showImg.setAttribute('src', e.target.src)
                _this.bigPicBox.setAttribute('src', e.target.src)
            }
        }
    }
    onClear() {
        for (let i = 0; i < this.lisEle.length; i++) {
            this.lisEle[i].classList.remove('active')
        }
    }
}